<template>
	<view class="login-wrap" >


		<view class="login-container text-white">
      <view class="login-logo">
        <!--
        <image src="/static/image/icon-logo-normal.91baef41.svg" style="width:120px; height:120px;padding: 0;margin-top:0px;">
      -->
        <image src="/static/uzx/logo0711.png" style="width:80px; height:80px;padding: 0;margin-top:0px;"></image>
      </view>

			<view class="d-flex-between-center" style="margin-top: 50px;">
				<text class="d-block font-size-48 my-8 font-weight-bold linear-gradient-text"
					style="line-height: 66rpx;color: #ffffff;">{{i18n.register}}</text>
					<text class="font-size-32 opacity-75" @click="showLanguage=true" style="color: #ffffff;">{{i18n.selectLang}}</text>
			</view>



        <u-subsection class="mt-40" :list="regNavList" :current="loginActive"
                      @change="(index)=>{loginActive=index}"></u-subsection>







      <view class="">
				<!-- 手机和邮箱 -->
				<view class="login-input-group d-flex" style="background: #242424;border: 1px solid #333;border-radius: 6px;">
					<navigator url="/pages/common/area" class="d-flex-between-center font-weight-bold mr-30" style="width: 90rpx;" v-if="false" >
						<text>{{area_code}}</text>
						<text class="iconfont icon-xiala font-size-20"></text>
					</navigator>

          <input type="text" v-model="usestring" class="login-input" v-if="loginActive==0" placeholder-style="color:#939393"
                 style="color: #ffffff;padding-left: 3px;"
                 :placeholder="i18n.account">

					<input type="text" v-model="usestring" class="login-input" v-else-if="loginActive==1" placeholder-style="color:#929292" style="color: #ffffff;padding-left: 3px;"
						:placeholder="i18n.email">

				</view>
				<!-- 验证码 -->
				<block  v-if="loginActive==1">
					<view class="login-input-group" v-if="loginActive != 2" style="background: #242424;border: 1px solid #333;border-radius: 6px;">
						<input type="digit" v-if="loginActive==0" v-model="code" class="login-input"  placeholder-style="color:#929292"
                   style="color: #000;"
							:placeholder="i18n.mobilecodePlaceholder">
						<input type="text" v-else-if="loginActive == 1" v-model="code" class="login-input"
                   placeholder-style="color:#939393" style="color: #ffffff;padding-left: 3px;"
                   :placeholder="i18n.emailcodePlaceholder">

						<view class="send-code-button" :class="hasSend ? 'send' : ''" @click="getCode">
							<text class="d-block h-100 w-100" v-if="!hasSend">{{i18n.send}}</text>
							<text class="d-block h-100 w-100 text-white" v-else>{{seconds}}s</text>
						</view>
					</view>
				</block>


				<!-- 密码 -->
				<view class="login-input-group" style="background: #242424;border: 1px solid #333;border-radius: 6px;">
					<input type="password" v-model="password" class="login-input"  placeholder-style="color:#929292"
                 style="color: #ffffff;padding-left: 3px;"
                 :placeholder="i18n.password">
				</view>

				<!-- 重复密码 -->
				<view class="login-input-group" style="background: #242424;border: 1px solid #333;border-radius: 6px;">
					<input type="password" v-model="re_password" class="login-input"  placeholder-style="color:#929292"
                 style="color: #ffffff;padding-left: 3px;"
                 :placeholder="i18n.confirmPassword">
				</view>

				<!-- 邀请码 -->
				<view class="login-input-group"  style="background: #242424;border: 1px solid #333;border-radius: 6px;">
					<input type="text" v-model="invitecode" class="login-input"  placeholder-style="color:#939393"  style="color: #ffffff;padding-left: 3px;"
                 :placeholder="invitecodePlaceholder">
				</view>

        <view class="login-input-group" v-if="mobile_must&&mobile_must==='1' " style="display: flex;background: #242424;border: 1px solid #333;border-radius: 6px;">
          <view class="d-flex-between-center pb-0" style="width: 100px;">

            <view class="" @click="showFromList=true">
              <text class="login-input font-size-16 mr-10"  style="color: #939393;padding-left: 3px;">{{area}}</text>
              <u-icon name="arrow-down" size="32"  style="color: #939393;"></u-icon>
            </view>
          </view>

          <input type="text" v-model="phone" class="login-input"  placeholder-style="color:#939393"
                 style="color: #ffffff;padding-left: 3px;"
                 :placeholder="$t('common.mobile')">
        </view>




				<view class="login-btn-group" style="margin-top: 10px;">
					<view class="d-flex mb-20" style="color: #939393;">
						{{i18n.hasaccount + i18n.go}}<navigator url="/pages/common/login" class="ml-4 text-warning" style="color: #1FA2FF">{{i18n.login}}
						</navigator>
					</view>
					<button class="warning-button connect_btn"  style="color: #000000"
                  @click="register">{{i18n.register}}</button>
				</view>
			</view>
		</view>

    <u-action-sheet :list="fromAccounts" v-model="showFromList" @click="clickFromActionSheet"
                    :cancelText="i18ncommon.cancel">
    </u-action-sheet>

		<view class="kefu" @click="$utils.jump('/pages/kefu/index')" v-if="false">
			<image src="../../static/image/icon/kefu.png" style="width: 36rpx;height: 41rpx;"></image>
		</view>

		<!-- 选择语言的popup -->
		<u-popup v-model="showLanguage" mode="bottom" length="80%" :title="i18n.selectLang">
			<view class="popup-list">
				<view class="popup-list-item" v-for="item in langs" :key="item.value" :class="{active : item.selected}"
					@click="setLang(item)">
					<text>{{item.name}}</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {langs} from "./../setting/data.js"

  import USelect from "../../uview-ui/components/u-select/u-select.vue";
	export default {
    components: {USelect},
		data() {
			return {
        invitecodePlaceholder:this.$t('common.invitecode')+this.$t('common.optional'),
        phone:'',
        showFromList:false,
        area:"+1",
        fromAccounts:[{text:'1'},{text:'86'},{text:'84'},{text:'66'},{text:'62'}],
        mobile_must:"",
				invite_code_must:"",
        logo1:"",
        logo2:"",
        langNew:'',
				usestring: '',
				password: '',
				re_password:"",
				invitecode:"",
				code:"",
				// 当前是那种注册方式
				loginActive: 0,
				// 是否已发送验证码
				hasSend:false,
				area_code:null,
				seconds:120,
				secondsInterval:null,
				showLanguage:false,
				langs: null,
        regNavList2:[],
			};
		},
		onLoad(options) {
			const {extension_code} = options;
      //console.log("extension_code=>"+extension_code);
			if(extension_code) {
        this.invitecode = extension_code;
      }


    //getAppConfig: () => vm.$u.get("/getAppConfig?key=invite_code_must"),
      this.$https.initData({
        url: 'getRegConfig',
        type: 'GET'
      }, (res, msg) => {

		      this.mobile_must=res.mobile_must;

		      this.invite_code_must=res.invite_code_must;
          if (this.invite_code_must==1){
            this.invitecodePlaceholder= this.$t('common.invitecode');
          }



	  })



			const _this = this
			uni.setNavigationBarTitle({
				title:_this.$t("common.register")
			})

      const systemInfo = uni.getSystemInfoSync();
      if (systemInfo.platform === 'h5' || systemInfo.platform === 'webview') {
        console.log('当前运行环境是H5');
        let lang = "en";
        var lang0 = navigator.language;
        if (lang0 == "zh-CN" || lang0 == "zh") {
          lang = "zh";
        }
        if (lang0 == "en-US" || lang0 == "en") {
          lang = "en";
        }
        if (lang0 == "vi-VN" || lang0 == "vi") {  //越南
          lang = "vi";
        }
        if (lang0 == "th-TH" || lang0 == "th") {  //泰国
          lang = "th";
        }
        if (lang0 == "id-ID" || lang0 == "id") {  //泰国
          lang = "id";
        }
        this._i18n.locale = lang;

        uni.setStorageSync('lang', lang);
        this.$store.commit('setLang', lang);
      }


      this.langNew = uni.getStorageSync("lang")||"en";

      this.$https.initData({
        url: 'logo',
        type: 'GET'
      }, (res, msg) => {
        //console.log(JSON.stringify(res));
        let message=res;
        this.logo1=message[0].value;
        this.logo2=message[1].value;
      })

		},
		onShow() {
			this.area_code = uni.getStorageSync('area_code') || "+86"
			this.setDefaultLang()
		},
		methods:{
      clickFromActionSheet(i){
        this.area= this.fromAccounts[i].text;
        console.log("i==>"+i);
      },
			setDefaultLang() {
				let langsData = langs.map(el => {
					el.selected = false
					return el
				})
				const lang = this.$store.state.lang || 'en'
				const has = langsData.findIndex(item => item.value === lang)
				langsData[has].selected = true
				this.langs = langsData;

        if (lang==="zh") {
          this.area = this.fromAccounts[1].text;
        }
        if (lang==="vi") {
          this.area = this.fromAccounts[2].text;
        }
        if (lang==="th") {
          this.area = this.fromAccounts[3].text;
        }
        if (lang==="id") {
          this.area = this.fromAccounts[4].text;
        }

			},
			//设置语言
			setLang(item) {
				let langs = this.langs.map(el => {
					el.selected = false
					if (el.value == item.value) el.selected = true
					return el
				})
				this.langs = langs
				this._i18n.locale = item.value
				//this.lang = item
				uni.setStorageSync('lang', item.value)
				this.$store.commit('setLang', item.value)

        this.langNew=item.value;

        //location.reload();

				setTimeout(() => {
					this.showLanguage = false
				}, 200);

        //
        const lang = this.$store.state.lang || 'en'
        if (lang==="en") {
          this.area = this.fromAccounts[0].text;
        }
        if (lang==="zh") {
          this.area = this.fromAccounts[1].text;
        }
        if (lang==="vi") {
          this.area = this.fromAccounts[2].text;
        }
        if (lang==="th") {
          this.area = this.fromAccounts[3].text;
        }
        if (lang==="id") {
          this.area = this.fromAccounts[4].text;
        }



			},
			//发送验证码
			getCode(){
				// 设置节流,防止频繁点击
				this.$u.throttle(()=>{
					const {loginActive,usestring,hasSend,i18n} = this

					if(hasSend) return
					//如果是手机
					if(loginActive == 0){
						if(!this.$u.test.number(usestring) || !usestring){
							this.$utils.showToast(i18n.plsInputMobile)
							return false
						}
					}else{
						//如果是邮箱
						if(!this.$u.test.email(usestring) || !usestring){
							this.$utils.showToast(i18n.plsInputEmail)
							return false
						}
					}
					//发送接口

          let data={user_string:usestring,
            scene:'register',
            area_code_id: 1,
            country_code: 86,
            lang: 'zh',
            email_code:''};
          this.$https.initData({
            url: 'sms_mail',
            type: 'POST',
            data
          }, (res, msg) => {
						this.$utils.showToast(res)
						//倒计时
						this.hasSend = true
						this.secondsInterval = setInterval(() => {
							this.seconds = this.seconds - 1
							if (this.seconds === 0) {
								clearInterval(this.secondsInterval)
								this.hasSend = false
								this.seconds = 120
							}
						}, 1000)
					})


				},1000)
			},
			async register(){
				let {loginActive,usestring,code,invitecode,password,re_password,i18n} = this
				if(loginActive === 0){
					if(!usestring){
						this.$utils.showToast(i18n.plsInputMobile)
						return false
					}
				}else if(loginActive === 1){
					//如果是邮箱
					if(!this.$u.test.email(usestring) || !usestring){
						this.$utils.showToast(i18n.plsInputEmail)
						return false
					}
				}else{
					if(usestring.length < 6){
						this.$utils.showToast(i18n.plsInputUsername)
						return false
					}
				}
				//判断验证码
				// if(loginActive != 2 && code.length < 4){
				// 	this.$utils.showToast(i18n.plsInputCode)
				// 	return false
				// }
				//判断密码
				if(password.length < 6){
					this.$utils.showToast(i18n.passwordPlaceholder)
					return false
				}
				if(re_password.length < 6){
					this.$utils.showToast(i18n.passwordPlaceholder)
					return false
				}
				if(this.$utils.charTest(password) ){
					this.$utils.showToast(this.$t("common.specialChart"))
					return false
				}
				//判断两次密码是否一致
				if(password != re_password){
					this.$utils.showToast(i18n.pwdInconsistent)
					return false
				}
				invitecode = this.$utils.charFilter(invitecode)
				//判断邀请码
				if(this.invite_code_must==1){
				  if(invitecode.length < 4){
					  this.$utils.showToast(i18n.plsInputInviteCode)
					return false
				 }
				}
        const lang = uni.getStorageSync('lang') || 'en';

        if (this.mobile_must&&this.mobile_must==='1'){
            if (this.phone===""){
              this.$utils.showToast(this.$t("common.plsInputMobile"));
              return  false;
            }
        }

        let data={
          lang:lang,
          user_string:usestring,
          code:code,
          password:password,
          re_password:re_password,
          extension_code:invitecode,
          type:'email',
          area:this.area,
          phone:this.phone,
        }
        this.$https.initData({
          url: 'user/register',
          type: 'POST',
          data
        }, (res, msg) => {
          this.$utils.showToast(res.msg)
          uni.setStorageSync('token', res.token);
          this.$store.commit('setToken', res.token);
					//跳转至登录页面
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/index/index"
            })
          }, 1200)


				})

				// try{
				// 	await this.$u.api.user.verifyMailCode(usestring,code)
				// 	//进行ajax
				// 	this.$u.api.user.register(
				// 		usestring,
				// 		code,
				// 		password,
				// 		re_password,
				// 		invitecode,
				// 		'email'
				// 	).then(res=>{
				// 		this.$utils.showToast(res.message)
				// 		// 跳转至登录页面
				// 		setTimeout(()=>{
				// 			uni.redirectTo({
				// 				url:'/pages/common/login'
				// 			})
				// 		})
				// 	})
				// }catch(e){
				// 	//TODO handle the exception
				// }
			}
		},
		computed: {
      i18ncommon() {
        return this.$t("common")
      },
      lang() {
        return lang
      },
			i18n() {
				return this.$t("common")
			},

			regNavList() {
        return [
          {
            name: this.$t('common').account
					},
          {
            name: this.$t('common').email
          }
				]
			}








		}
	}
</script>

<style lang="scss">
  page{
    background: #000000;
  }
	.login-wrap {
		height: 200vh;
    background-color: #000000;

		.login-container {
			position: fixed;
      left: 10px;
      right: 10px;
      bottom: 30px;
			padding: 40rpx;
			padding-bottom: 20rpx;
			//background-color: $uni-color-black;
			border-radius: 10px;
			min-height: 55vh;
		}
	}

	.send-code-button{
		position: absolute;
		height: 58rpx;
		line-height: 58rpx;
		@extend .font-size-28;
		border-radius: 20rpx;
		background-color: $uni-color-warning;
		padding: 0 40rpx;
		right: 0;
		bottom: 6rpx;
		transition: all .3s ease 0s;
		color: #fff;
		&.send{
			background-color: rgba(0,0,0,.05);
			color: #333;
		}
	}

	// 弹出层列表
	.popup-list {
		.popup-list-item {
			height: 96rpx;
			line-height: 96rpx;
			padding: 0 30rpx;
			@extend .font-size-32;
			position: relative;
			display: flex;
			align-items: center;
      color: #ffffff;
			&:before {
				content: "";
				position: absolute;
				left: 30rpx;
				right: 30rpx;
				bottom: 0;
				height: 2rpx;
				//background-color: #efefef;
			}

			&.active {
				background-color: #000000;
        color: #ffffff;
				&:after {
          content: "";
          width: 40rpx;
          height: 40rpx;
          background-image: url('../../static/uzx/icon_coin_select_yes.png');
          background-size: cover;
          position: absolute;
          right: 80rpx;
          top: 50%;
          margin-top:-20rpx;
				}
			}
		}
	}
  .connect_btn{
    background: -webkit-gradient(linear, left top, right top, color-stop(10%, #1FA2FF), color-stop(55.21%, #12D8FA), to(#A6FFCB));
    background: -webkit-linear-gradient(left, #1FA2FF 10%, #12D8FA 55.21%, #A6FFCB 100%);
    background: -o-linear-gradient(left, #1FA2FF 10%, #12D8FA 55.21%, #A6FFCB 100%);
    background: linear-gradient(90deg, #1FA2FF 10%, #12D8FA 55.21%, #A6FFCB 100%);

    //-webkit-background-clip: text;
    //-webkit-text-fill-color: transparent;
    //background-clip: text;
    //text-fill-color: transparent;
    //text-align: center;
  }
</style>
